<template>
    <div class="voice_container">
        <ZWGroup ref="ZWGroupRef" :group-id="groupId" :type="3" @submit="group" />
        <div class="voice_main">
            <div class="voice_search">
                <ZwSearchForm row-num="3" :option="searchOption" @search="searchResult" @reset="reset" />
            </div>
            <div class="voice_header_button">
                <FormulaBar
                    ref="FormulaBarRef"
                    :type="3"
                    @batchTag="batchTag"
                    @batchDel="batchDel"
                    @batchDown="batchDown"></FormulaBar>
            </div>
            <el-scrollbar v-if="voiceData.length > 0" class="voice_list">
                <div class="voice_content">
                    <Details
                        ref="del"
                        class="img_details_item"
                        :voice-data="voiceData"
                        @submit="refreshTable"></Details>
                </div>
            </el-scrollbar>
            <el-empty v-else image="/static/noData.png" description="暂无数据"></el-empty>
            <!-- 分页 -->
            <ZWPagination ref="PaginationRef" @submit="page" />
        </div>
        <!-- 标签弹框 -->
        <ZWSelectTag ref="SelectTagRef" @submit="getTags" />
        <!-- 上传弹框 -->
        <Upload ref="UploadRef" :type="3" :group-id="groupId === 'all' ? 0 : groupId" @submit="onSubmit" />
    </div>
</template>

<script setup lang="ts">
import ZWGroup from '@/components/ZWGroup.vue';
import FormulaBar from './components/FormulaBar.vue';
import Upload from './components/Upload.vue';
import Details from './components/Details.vue';
import ZWSelectTag from '@/components/ZWSelectTag.vue';
import ZWPagination from '@/components/ZWPagination.vue';
import ZwSearchForm from '@/components/zw/search-form/SearchForm';
import { getVoiceList } from '@/api/concreation';
import { getSetionId, treeH, reSize } from '@/utils/utils';
import { ElMessage } from 'element-plus';
import { batchTagAdd1, batchTagDel1, batchDownLoad, getCreateList } from '@/api/common';
import { ref, reactive, onMounted, onUnmounted, computed } from 'vue';
import { deepCopy } from '@/utils/helper';
import { useStore } from '@/store';
import bus from '@/utils/bus';
import { endLoading, startLoading } from '@/utils/request';
const store = useStore();
const ZWGroupRef: any = ref(null);
const voiceData = ref([]);
const cardId = ref([]); // 选中卡片id
const del = ref(); // 调用子组件的方法
const groupId = ref<number | string>('all');
const ZWgroupId = ref(0);
const scrollbarHeight = ref<string>('400px');

// 获取选中的图片 id
const voiceId = (data: any) => {
    cardId.value = data;
};
bus.on('voiceId', voiceId);
let params = reactive({
    page_size: 15,
    page: 1,
    group_id: 0,
    title: '',
    user_id: '',
    created_time: [],
    is_radar: '',
    tag_list: ''
});
const searchOption = computed(() => {
    return [
        {
            label: '音频搜索',
            name: 'title',
            value: '',
            type: 'input',
            width: '280px',
            placeholder: '请输入图片名称进行搜索'
        },
        {
            label: '上传者',
            name: 'user_id',
            value: [],
            multiple: true,
            type: 'select',
            filterable: true,
            placeholder: '全部',
            fetchOptionApi: () => {
                return new Promise(resolve => {
                    getCreateList({}).then((res: any) => {
                        const targetArr = res.map((item: any) => {
                            item.name = `${item.name}  (${item.phone})`;
                            return item;
                        });
                        resolve(targetArr);
                    });
                });
            },
            formatOption: (v: any) => ({
                label: v.name,
                value: v.id
            })
        },
        {
            label: '添加时间',
            name: 'created_time',
            value: [],
            type: 'datePicker',
            datePickerType: 'daterange',
            datePickerFormat: 'YYYY-MM-DD HH:mm:ss',
            valueFormat: 'YYYY-MM-DD HH:mm:ss',
            startPlaceholder: '开始时间',
            endPlaceholder: '结束时间'
        },
        {
            label: '标签筛选',
            name: 'tag_list',
            value: [],
            type: 'select',
            placeholder: '请选择标签',
            multiple: true,
            popperClass: 'zw-hide_select_option',
            isTagSelect: true,
            formatOption: v => ({
                label: v.name,
                value: v.id
            })
        }
        // {
        //   label: '图片类型',
        //   name: 'is_radar',
        //   value: '',
        //   type: 'select',
        //   placeholder: '全部类型',
        //   fetchOptionApi: () => {
        //     return new Promise((resolve) => {
        //       resolve([
        //         { name: '全部类型', id: '-1' },
        //         { name: '普通图片', id: '0' },
        //         { name: '雷达图片', id: '1' }
        //       ])
        //     })
        //   },
        //   formatOption: (v: { name: any; id: any }) => ({
        //     label: v.name,
        //     value: v.id
        //   })
        // },
        // {
        //   label: '标签筛选',
        //   name: 'tag_list',
        //   value: [],
        //   type: 'select',
        //   placeholder: '请选择标签',
        //   multiple: true,
        //   popperClass: 'zw-hide_select_option',
        //   isTagSelect: true,
        //   formatOption: (v) => ({
        //     label: v.name,
        //     value: v.id
        //   })
        // }
    ];
});
const defaultParams = reactive({
    title: '',
    user_id: [],
    created_time: [],
    is_radar: -1,
    tag_list: [],
    group_id: 0
});
const state = reactive({
    searchParams: deepCopy(defaultParams)
});
const reset = (v?: any) => {
    params = { ...params, ...defaultParams };
    getVoiceData();
    del.value?.clearSelection();
};
// 分组信息
const group = (data?: any) => {
    if (data) {
        defaultParams.group_id = data?.id || 0;
        groupId.value = data?.id || 0;
    } else {
        defaultParams.group_id = groupId.value;
    }
    params.group_id = groupId.value;
    params.page_size = 15;
    params.page = 1;
    getVoiceData();
    del.value?.clearSelection();
};
// 分页信息
const page = (page: any) => {
    params.page_size = page.page_size;
    params.page = page.page;
    del.value?.clearSelection();
    getVoiceData();
};
const getVoiceData = () => {
    getVoiceList(params).then((res: any) => {
        res.data.map((item: any) => {
            item.compilesss = [
                {
                    isShow: false,
                    name: 'statistics',
                    content: '详情'
                },
                {
                    isShow: false,
                    name: 'delete',
                    content: '删除'
                },
                {
                    isShow: false,
                    name: 'download',
                    content: '下载'
                },
                {
                    isShow: false,
                    name: 'write',
                    content: '编辑'
                },
                {
                    isShow: false,
                    name: 'copy',
                    content: '分享'
                }
            ];
        });
        voiceData.value = res.data;
        store.dispatch('pageTotal', res.total);
    });
};

// 批量打标签
const batchTag = async (data: any) => {
    startLoading();
    const params = {
        type: 3,
        content_ids: cardId.value,
        tag_ids: getSetionId('id', data.tag_ids) //选中标签ID
    };
    //0 批量打 1批量删除      //批量打标签              // 批量删除
    try {
        data.defaultVal == 0 ? await batchTagAdd1(params) : await batchTagDel1(params);
        ElMessage.success(`批量${data.defaultVal ? '移除' : '打'}标签成功`);
        del.value?.clearSelection();
        getVoiceData();
    } catch (e) {
        endLoading();
    }
};
// 批量删除
const batchDel = () => {
    del.value.isBatchDel();
};
// 批量下载
const batchDown = () => {
    const params = {
        material_type: 3,
        material_ids: cardId.value
    };
    batchDownLoad(params).then((res: any) => {
        del.value?.clearSelection();
        ElMessage.success('批量下载成功');
        window.location = res.url;
    });
};
const refreshTable = () => {
    del.value?.clearSelection();
    ZWGroupRef.value.getGroup();
    getVoiceData();
};
// 查询
const searchResult = (data: any) => {
    params.title = data.title;
    params.user_id = data.user_id;
    params.created_time = data.created_time;
    params.tag_list = data.tag_list;
    getVoiceData();
    del.value?.clearSelection();
};
bus.on('batchTag', batchTag);
bus.on('getVoiceData');

const onSubmit = (data: any) => {
    // ZWGroupRef.value.getGroup();
    // ZWGroupRef.value.changeGroup({ id: data.id });

    groupId.value = data.id;
    defaultParams.group_id = data.id;
    params.group_id = data.id;
    params.page_size = 15;
    params.page = 1;
    ZWGroupRef.value.getGroup();
    ZWGroupRef.value.changeGroup({ id: data.id });
    getVoiceData();
};

/**
 * @description: 获取内容区域滚动高度
 * @return {*}
 */
const getScrollbarHeight = () => {
    const h = treeH('.img_details', 140);
    scrollbarHeight.value = `${h}px`;
};

onUnmounted(() => {
    bus.off('getVoiceData');
});
onMounted(() => {
    group();
    getScrollbarHeight();
    reSize(() => getScrollbarHeight());
});
</script>

<style lang="scss" src="./style.scss" scoped></style>
